@import "reset.css";
/*html,body,#mn{ height: 100%; overflow: hidden;}*/
#mn{ padding: 60px 0 40px; box-sizing: border-box; margin: 0 auto; width:1000px; margin:0 auto;}
.header{ position: fixed; z-index: 9999; top: 0; width: 100%; line-height: 60px; height: 60px; background: url(../images/header-bg.jpg);
  .nav{ width: 1000px; margin:0 auto;}
  img{float:left;}
  h1{ float: left; font-size: 14px; font-weight: 500; color: #e66b14;}
  ul{float:right;
    li{float:left; width: 50px; text-align: center; color: #858585; line-height: 30px; margin: 0 10px; padding-top: 15px;
      //&.cur{ color: #e66b14; border-bottom: 2px solid #e66b14;}
      &:hover,&:focus{ color: #e66b14; cursor: pointer;}
    }
  }
}
.footer{ position: fixed; bottom: 0; width: 100%; height:40px; text-align: center; background: #1e2128; color: #e3e3e3; line-height: 40px;}

.line{ height: 40px; background: #f1f1f1; border-bottom: 1px solid #e1e1e1; -webkit-box-shadow:  0 1px 2px #e3e3e3; -moz-box-shadow:  0 1px 2px #e3e3e3; box-shadow:  0 1px 2px #e3e3e3;}
.section{ min-height: auto; box-sizing: border-box; position: relative; text-align: center; overflow: hidden;
  h2,h3{ font-weight: 500; text-align: center; padding:0 40px;}
  &.step-1{
    .slide-box{ margin: 0 auto; text-align: left; white-space: nowrap; _width:100%; _overflow: hidden;
      .img{ display: inline-block; width: 100%; position: relative; text-indent:0;
        img{ width: 100%;
          &.ios,&.android,&.qr{ position: absolute; width: auto;}
          &.android{}
          &.ios{ }
          &.qr{ }
        }
      }
    }
  }
  &.step-2,&.step-7{ padding: 40px 0;
    h2{ line-height: 30px; color: #858585; font-size: 18px; }
    .dot-line{ margin: 20px auto; width: 700px; height: 8px; background: url(../images/dot-line.png);
      _overflow: hidden; _background: none; _border-bottom: 1px solid #e3e3e3;}
    span{display: inline-block; width: 136px; line-height: 40px; font-size: 14px; color: #999;}
  }
  &.step-2{ min-height: auto;}
  &.step-3,&.step-4,&.step-5,&.step-6{ background: #f3f7f7; padding: 40px 0; text-align: center; height: 460px;
    h2{ line-height: 30px; color: #e66b14; font-size: 22px;}
    h3{ line-height: 30px; color: #9b9c9c; font-size: 16px;}
  }
  &.step-3{ height: auto;}
  &.step-4{ background: #fff; height: auto;}
  &.step-5{
    .ti{ position: absolute; margin-left: -300px; top: 200px; width: 100%;}
  }
  &.step-6{ background: #fff; height: auto; text-indent: -200px;
    .ti{ position: absolute; right: 50px; top: 200px; text-indent: 0;
      h2,h3{ text-align: left;}
    }
  }
  &.step-7{ height: auto; background: #f3f7f7;
    ul{ width: 960px; margin: 20px auto;
      li{ float: left; padding: 10px;
        .avatar{ margin: 0 auto; width: 130px; height: 130px; -webkit-border-radius: 80px; -moz-border-radius: 80px; border-radius: 80px; overflow: hidden;
          img{ width: 100%;}
        }
        span{ font-size: 18px; color: #999;}
        p{ font-size: 12px; text-align: center; line-height: 20px; color: #777;}
      }
      &.column-3 li{ width: 300px;}
      &.column-4 li{ width: 220px;}
      &.column-5 li{ width: 172px;}
    }
  }
  &.step-8{ background: url(../images/section-6.jpg) no-repeat center center #f7c440; padding: 40px 0 200px; text-align: left; height: auto;
    h2{ width: 780px; margin: 0 auto; color: #fff; text-align: left; line-height: 30px; font-size: 20px;}
    p{ width: 780px; margin: 0 auto; text-indent: 32px; font-size: 16px; color: #fff; line-height: 24px; padding: 10px 0;}
  }
  &.step-9{ padding: 40px 0; vertical-align: top; text-align: center; min-height: auto;
    h2{ text-align: left; line-height: 40px; color: #999; padding-bottom: 40px;}
    p{ line-height: 32px; color: #999; font-size: 14px; text-align: left;}
    span{ display: inline-block; vertical-align: middle; width: 30px; height: 30px; margin-right: 8px; background-image: url(../images/dot-line.png); background-repeat: no-repeat;
      &.weixin{ background-position: 0 -10px;}
      &.weibo{ background-position: -30px -10px;}
      &.website{ background-position: -60px -10px;}
      &.tel{ background-position: -90px -10px;}
      &.email{ background-position: -120px -10px;}
      &.location{ background-position: -150px -10px;}
      &.double{ width: auto; background-image:none; line-height: 16px; margin-right: 0;}
    }
    .attention{ display: inline-block; width: 480px; line-height: 96px;
      img{float:left; padding: 5px;}
      p{float:left; padding: 5px;}
    }
    .contact{ display: inline-block; width: 280px; vertical-align: top;}
    .attention,.contact{ _zoom:1; *display:inline;}/*IE的inline-block兼容处理*/
  }
}

/*
@media screen and (max-width: 800px) {
  html,body{ min-width: 300px;}
  #mn{ padding: 0;}
  .header{ position: inherit; height: 92px;
    img{ margin-left: -20px;}
    ul{float: none; clear: both;
      li{ padding-top: 0; width: 20%; margin: 0;}
    }
  }
  .footer{ position: inherit;}
  .section{ min-height: auto;
    img{ width: 100%;}
    &.step-2{
      span{float:left; width: 25%;}
    }
    &.step-3{ height: auto;}
    &.step-4{ height: auto;}
    &.step-5{ height: auto;
      .ti{ position: static; margin: 0;}
    }
    &.step-6{ text-indent: 0; height: auto;
      .ti{ position: static;
        h2,h3{ text-align: center;}
      }
    }
    &.step-7{ height: auto;
      ul{ width: auto;}
    }
    &.step-8{ background: url(../images/section-6.jpg) no-repeat center bottom #f7c440; background-size: 100%; height: auto; padding-bottom: 240px;
      h2{ padding: 0 20px;}
      p{ padding: 0 20px; width: auto;}
    }
    &.step-9{
      img{ width: auto;}
      h2{ padding-bottom: 0; }
      .attention{ width: 280px;
        p{ clear: both;}
      }
    }
  }
}*/
